<script setup lang="ts">
/**
 *  系统管理-系统数据-文件管理
 */
import {onMounted, ref} from 'vue'
import {Download, Refresh, Search} from '@element-plus/icons-vue'
import {labelTypeList} from '@/components/baseTs/labelType'
import {getLabelListByTypeApi} from '@/assets/api/systemManagement/data/label'
import {ElMessage} from 'element-plus'
import TableToolButton from '@/components/base/TableToolButton.vue'
import {downloadFileApi, getFilePageApi, removeFileApi} from '@/assets/api/systemManagement/data/file'
import FileEdit from '@/views/systemManagement/data/file/FileEdit.vue'
import type {AxiosResponse} from "axios";
import type {DataFile} from "@/components/interface/data/dataFile";

const form = ref({
  name: '',
  labelId: null,
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 获取文件标签
const fileLabelList = ref()
const getFileLabelList = () => {
  const item = labelTypeList.find(item => item.label === '文件标签')
  if (typeof item === 'undefined') return
  getLabelListByTypeApi(item.value).then((res: AxiosResponse) => {
    if (res.data.code !== 200) {
      ElMessage.error({message: res.data.data, showClose: true})
      return
    }
    fileLabelList.value = res.data.data
  })
}

const onSubmit = () => {
  form.value.pageNum = 1
  getTableData()
}

const onReset = () => {
  form.value.name = ''
  form.value.labelId = null
}

// 全选按钮
const multipleTableRef = ref()
const multipleSelection = ref()
const handleSelectionChange = (val: object[]) => {
  multipleSelection.value = val
}

// 获取用户列表
const tableData = ref([])
const tableLoading = ref(false)
const getTableData = () => {
  tableLoading.value = true
  getFilePageApi(form.value).then((res: AxiosResponse) => {
    tableLoading.value = false
    if (res.data.code !== 200) {
      ElMessage.info(res.data.data)
      return
    }
    tableData.value = res.data.data.records
    form.value.total = res.data.data.total
  })
}

// 页码切换处理器
const handleCurrentChange = () => {
  getTableData()
}

// 新增、编辑弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editForm = ref() // 编辑的数据
const openDialog = (tag: string, obj: object) => {
  dialogTitle.value = tag
  editForm.value = obj
  dialogVisible.value = true
}

// 编辑修改回调
const saveCallBack = (saved: boolean) => {
  if (saved) {
    dialogVisible.value = false
    getTableData()
  }
}

// 下载
const download = (row: DataFile) => {
  downloadFileApi(row.fileUrl, row.type).then((res: AxiosResponse) => {
    if (!(res.data instanceof Blob))
      ElMessage.error(res.data)
    const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = row.name
    a.click()
    window.URL.revokeObjectURL(url)
  })
}

// 删除
const deleteCallBack = (ids: string) => {
  removeFileApi(ids).then((res: AxiosResponse) => {
    if (res.data.code === 200) {
      ElMessage.success({message: res.data.data, showClose: true})
      getTableData()
    } else {
      ElMessage.error({message: res.data.data, showClose: true})
    }
  })
}

onMounted(() => {
  getFileLabelList()
  getTableData()
})
</script>

<template>
  <el-card  shadow="never">
    <template #header>
      <el-breadcrumb>
        <el-breadcrumb-item>系统数据</el-breadcrumb-item>
        <el-breadcrumb-item>系统文件</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <!-- 搜索 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-form class="form-inline" :inline="true" :model="form">
          <el-form-item label="文件名" prop="name">
            <el-input v-model="form.name" style="width: 200px" placeholder="请输入文件名" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属标签">
            <el-select v-model="form.labelId" style="width: 200px" placeholder="请选择标签" clearable>
              <el-option
                v-for="item in fileLabelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :icon="Search">搜索</el-button>
            <el-button @click="onReset" :icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格工具 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <table-tool-button :export-visible="false" :selected-array="multipleSelection" @to-add="openDialog"
                           @to-edit="openDialog" @to-delete="deleteCallBack"/>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-table
          ref="multipleTableRef"
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          border
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column property="name" label="文件名"/>
          <el-table-column property="labelName" label="所属标签"/>
          <el-table-column property="updatedBy" label="上传人"/>
          <el-table-column property="createdTime" label="上传时间"/>
          <el-table-column property="updatedTime" label="更新时间"/>
          <el-table-column property="remark" label="备注"/>
          <el-table-column label="下载">
            <template #default="scope">
              <el-button type="warning" :icon="Download" @click="download(scope.row)" circle/>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :page-size="form.pageSize" v-model:current-page="form.pageNum"
                       @current-change="handleCurrentChange" layout="prev, pager, next" v-model:total="form.total"/>
      </el-col>
    </el-row>
    <!--  新增、编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600"
      :destroy-on-close="true"
    >
      <file-edit :form="editForm" :file-label-list="fileLabelList" @save="saveCallBack"
                 @close="dialogVisible = false"/>
    </el-dialog>
  </el-card>
</template>

<style scoped>

</style>
